<template>
    
    <div class="form-item">
        <div class="login-title">
            <t-typography-title level="h3">登录到Light-IOT</t-typography-title>
        </div>
        <div id="form-account">
            <Account></Account>
        </div>
        <div class="phone-login">
            使用手机号登录
        </div>
        <t-divider align="center" dashed>其它登录方式</t-divider>
        <div class="third-login">
            <t-space break-line>
                <LogoQqIcon />
                <LogoWechatStrokeIcon />
            </t-space>
        </div>
    </div>
    
</template>
<style scoped>
.form-item{
    width: 100%;
    padding: 40px 48px 22px;
    display: flex;
    flex-direction: column;
    
    justify-content: center;
    box-sizing: border-box;
    background-color: #fff;
    min-height: 564px;
    min-width: 432px;
}


.phone-login{
    cursor: pointer;
    margin-top: var(--td-comp-margin-l);
    margin-bottom: var(--td-comp-margin-l);
    color: var(--td-brand-color);
}

.third-login{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    :deep(.t-space-item){
        cursor: pointer;
    }
}
</style>
<script setup>
import Account from './Account.vue';
import {LogoQqIcon,LogoWechatStrokeIcon} from 'tdesign-icons-vue-next';
</script>